<template>
  <section id="containerReport">
    <Row>
      <i-col>
        <Form ref="tabParam" :model="tabParam" label-position="right" inline>

          <FormItem>
            <DatePicker v-model="timeSlot.timeVal" type="daterange" :options="timeSlot.timeOptions" split-panels placeholder="时间" format="yyyy年MM月dd日" style="width: 230px; margin-left: 30px;" clearable>
            </DatePicker>
          </FormItem>
          <FormItem>
            <Select v-model="tabParam.curState" placeholder="状态" style="width: 100px; margin-left: 10px;" clearable>
              <Option v-for="item in containerStatus" :value="item.curState" :key="item.statusName">
                {{ item.statusName}}
              </Option>
            </Select>
          </FormItem>
          <FormItem>
            <Input type="text" v-model="tabParam.containerNo" placeholder="集装箱号" style="margin-left: 10px;" clearable></Input>
          </FormItem>&nbsp;&nbsp;&nbsp;&nbsp;
          <FormItem label="箱属:">
            <Select v-model="tabParam.userName" filterable style="width: 120px" clearable>
              <Option v-for="item in containerAttributeArr" :value="item" :key="item">{{ item}}</Option>
            </Select>
          </FormItem>&nbsp;
          <FormItem label="当前站:">
            <Select v-model="tabParam.curPos" filterable style="width: 120px;" clearable>
              <Option v-for="item in containerStationArr" :value="item" :key="item">{{ item}}</Option>
            </Select>
          </FormItem>
          <FormItem>
            <Button type="primary" @click="handleSearch" icon="ios-search" style="margin-left: 10px;">
              搜索
            </Button>
          </FormItem>
          <FormItem>
            <Button type="primary" @click="exportDataInventory" style="margin-left: 10px;">
              <Icon type="ios-download-outline"></Icon>
              导出文件
            </Button>
          </FormItem>
        </Form>
        <tablePage ref="containerReportList" :api="getTotalDataByPage" :param="tabParam">
          <template slot-scope="props">
            <Table :columns="containerColumn" :data="props.data"></Table>
          </template>
        </tablePage>
      </i-col>
    </Row>
    <xlinkModal v-model="operatModal.historyShow" title="历史记录" width="960">
      <containerHistory1 v-if="operatModal.historyShow" :containerNo="curContainer.containerNo"></containerHistory1>
    </xlinkModal>
  </section>
</template>
<script>
  import tablePage from '@components/table/tablePage.vue'
  import moment from 'moment'
  import {
    getTotalDataByPage,
    getContainersHeaders,
    getContainersPositionList
  } from '@api/containerPlatform/containerManagement'
  import xlinkModal from '@components/modal/xlinkModal'
  import containerHistory1 from './components/containerHistory1'
  import { exportUtil } from '@/vendor/exportInvoke'

  export default {
    name: 'containerReport',
    data () {
      let timeSlot = {
        timeOptions: {
          shortcuts: [
            {
              text: '最近一周 ',
              value () {
                let end = new Date()
                let start = new Date()
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
                return [start, end]
              }
            },
            {
              text: '最近一月',
              value () {
                let end = new Date()
                let start = new Date()
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
                return [start, end]
              }
            },
            {
              text: '最近三个月',
              value () {
                let end = new Date()
                let start = new Date()
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
                return [start, end]
              }
            }
          ]
        },
        timeVal: []
      }
      let containerStatus = [
        { 'curState': 1, 'statusName': '在站-空' },
        { 'curState': 2, 'statusName': '在站-重' },
        { 'curState': 3, 'statusName': '在途-空' },
        { 'curState': 4, 'statusName': '在途-重' }
      ]
      let containerAttributeArr = []
      let containerStationArr = []
      let tabParam = {
        curState: '',
        containerNo: '',
        userName: '',
        curPos: '',
        sortName: 'start_station_time',
        sortOrder: 'desc',
        timeStart: timeSlot.timeVal[0],
        timeEnd: timeSlot.timeVal[1]
      }
      let operatModal = {
        historyShow: false
      }
      let containerColumn = [
        {
          title: '箱号',
          key: 'containerNo',
          width: 120,
          align: 'center',
          fixed: 'left'
        },
        {
          title: '箱属',
          key: 'userName',
          width: 120,
          align: 'center'
        },
        {
          title: '发货人',
          key: 'sender',
          width: 120,
          align: 'center'
        },
        {
          title: '收货人',
          key: 'receiver',
          width: 120,
          align: 'center'
        },
        {
          title: '发站',
          key: 'sendStationName',
          width: 100,
          align: 'center'
        },
        {
          title: '发出时间',
          key: 'startStationTime',
          width: 100,
          align: 'center'
        },
        {
          title: '到站',
          key: 'endStationName',
          width: 100,
          align: 'center'
        },
        {
          title: '到达时间',
          key: 'endStationTime',
          width: 100,
          align: 'center'
        },
        {
          title: '当前站',
          key: 'curPosition',
          width: 100,
          align: 'center'
        },
        {
          title: '状态',
          key: 'isEmpty',
          width: 100,
          align: 'center',
          render: (h, params) => {
            let thisdata = params.row.isEmpty === 1 ? '重' : '空'
            return (<span>{thisdata}</span>)
          }
        },
        {
          title: '货票号',
          key: 'waybillNo',
          width: 120,
          align: 'center'
        },
        {
          title: '运费',
          key: 'totalFee',
          width: 100,
          align: 'center'
        },
        {
          title: '品名',
          key: 'dwPm',
          width: 100,
          align: 'center'
        },
        {
          title: '查看',
          key: 'action',
          fixed: 'right',
          width: 120,
          render: (h, params) => {
            let historyBtn = (<i-button type="primary" size="small" style="margin-right: 5px;" onClick={() => this.showHistory(params.row)}>用箱历史</i-button>)
            let btnArray = []
            btnArray.push(historyBtn)
            return (btnArray)
          }
        }
      ]
      let curContainer = {}
      return {
        timeSlot,
        containerStatus,
        containerAttributeArr,
        containerStationArr,
        tabParam,
        curContainer,
        operatModal,
        getTotalDataByPage,
        containerColumn
      }
    },
    methods: {
      handleSearch (val) {
        this.$refs['containerReportList'].dataRefresh()
      },
      showHistory (row) {
        this.curContainer = row
        this.operatModal.historyShow = true
      },
      exportDataInventory () {
        let param = Object.assign({}, this.tabParam)
        param.page = 1
        param.pageSize = 100000
        getTotalDataByPage(param).then(res => {
          if (res.data.isSuccess === 1) {
            let resDate = res.data.data.rows
            let result = this.fasetJson(resDate)
            exportUtil.export2Excel('箱东报表', result.columns, result.data)
          }
        })
      },
      fasetJson (tabData) {
        let result = {
          columns: [
            { title: '箱号', key: 'containerNo' },
            { title: '箱属', key: 'userName' },
            { title: '发货人', key: 'sender' },
            { title: '收货人', key: 'receiver' },
            { title: '发站', key: 'sendStationName' },
            { title: '发出时间', key: 'startStationTime' },
            { title: '到站', key: 'endStationName' },
            { title: '到达时间', key: 'endStationTime' },
            { title: '当前站', key: 'curPosition' },
            { title: '状态', key: 'isEmpty' },
            { title: '货票号', key: 'waybillNo' },
            { title: '品名', key: 'dwPm' }
          ],
          data: []
        }
        let indexCount = 0
        tabData.forEach((item) => {
          let dataItem = {
            containerNo: item.containerNo,
            userName: item.userName,
            sender: item.sender,
            receiver: item.receiver,
            sendStationName: item.sendStationName,
            startStationTime: item.startStationTime,
            endStationName: item.endStationName,
            endStationTime: item.endStationTime,
            curPosition: item.curPosition,
            isEmpty: item.isEmpty === 1 ? '重' : '空',
            waybillNo: item.waybillNo,
            dwPm: item.dwPm
          }
          result.data.push(dataItem)
          indexCount++
        })
        console.log(indexCount)
        return result
      }
    },
    mounted () {
      getContainersHeaders().then(res => {
        if (res.data.isSuccess === 1) {
          this.containerAttributeArr = res.data.data
        }
      }).catch((err) => {
        console.log('getContainersHeaders:' + err)
      })
      getContainersPositionList({ isAll: 0 }).then(res => {
        if (res.data.isSuccess === 1) {
          this.containerStationArr = res.data.data
        }
      }).catch((err) => {
        console.log('getCurStationList:' + err)
      })
    },
    watch: {
      'timeSlot.timeVal': function (val, oldval) {
        if (val && val[0] && val[1]) {
          this.tabParam.timeStart = moment(val[0]).format('YYYY-MM-DD')
          this.tabParam.timeEnd = moment(val[1]).format('YYYY-MM-DD')
        } else {
          delete this.tabParam.timeStart
          delete this.tabParam.timeEnd
        }
      }
    },
    components: { tablePage, xlinkModal, containerHistory1 }
  }
</script>
<style scoped>
  .FormItem {
    margin-left: 50px;
  }
</style>
